<template>
    <div style="padding-top:20px">
        <div class="content">
            <div class="card" @click="posSum('/pos')">
                <img class="cardIcon" src="@/assets/index/terminalIcon.png" />
                <div class="flexsty">
                    <div class="zdzs">终端总数</div>
                </div>
                <div class="num">{{ posNum.totalActNum }}</div>
                <div class="bottombox">
                    <div style="text-align: center">
                        <div>{{ posNum.ystdActNum }}</div>
                        <div style="margin-top: 10px">昨日唤醒</div>
                    </div>
                    <div class="line"></div>
                    <div style="text-align: center">
                        <div>{{ posNum.ystdBindNum }}</div>
                        <div style="margin-top: 10px">昨日绑定</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="card card1" @click="posSum('/merchantsTj')">
                <img class="cardIcon" src="@/assets/index/merchantIcon.png" />
                <div class="flexsty">
                    <div class="zdzs">商户总数 </div>
                </div>
                <div class="num">{{ customNo.allIncrNum }}</div>

                <div class="bottombox">
                    <div style="text-align: center">
                        <div>{{ customNo.ystdAgentIncrNum }}</div>
                        <div style="margin-top: 10px">昨日新增商户</div>
                    </div>
                    <div class="line"></div>
                    <div style="text-align: center">
                        <div>{{ customNo.ystdSubAgentIncrNum }}</div>
                        <div style="margin-top: 10px">下级昨日新增</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent } from 'vue'
import { appStatisCust, appStatisPosAct, findAgentInfoByAgentNo, toView } from '@/api/dataAnalysis'
import store from '@/store/index.js'
export default defineComponent({
    name: 'dataAnalysis',
    setup() {
        const router = useRouter()
        const state = reactive({
            tradeNum: {}, //交易统计
            posNum: {}, //终端统计
            customNo: {}, //商户统计
            allyNo: '' //代理商编号
        })
        const getToView = () => {
            toView({}).then(res => {
                state.allyNo = res.object.agentInfo.agentBean.agentNo
                getPosCount()
                getAgentCount()
            })
        }
        const getPosCount = () => {
            appStatisPosAct({ agencySource: store.state.user.userInfo.agentBean.agencySource, agentNo: state.allyNo }).then(res => {
                state.posNum = res.object
            })
        }
        const getAgentCount = () => {
            appStatisCust({ agencySource: store.state.user.userInfo.agentBean.agencySource, agentNo: state.allyNo }).then(res => {
                state.customNo = res.object
            })
        }

        getToView()
        const posSum = url => {
            router.push({
                path: url,
                query: {
                    allyNo: state.allyNo
                }
            })
        }

        return {
            ...toRefs(state),
            posSum
        }
    }
})
</script>

<style scoped lang="scss">
.content {
    color: #ffffff;
    padding: 10px 10px;

    .card {
        width: 100%;
        background: linear-gradient( 45deg, #FFF6A8 0%, #FF8D1E 100%);
        background-size: 100% 100%;
        border-radius: 10px;
        position: relative;
        padding: 0 50px;
        padding-top: 14px;
        color: #000000;
        .cardIcon{
            position: absolute;
            top: -16px;
            right: 10px;
            width: 96px;
            // height: 96px;
        }
        .zdzs {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-family: SimHei;
            font-weight: 400;
            img{
                width: 15px;
                height: 15px;
                margin-left: 5px;
            }
        }
        .btn {
            position: absolute;
            right: 20px;
            top: 18px;
            width: 80px;
            height: 20px;
            box-sizing: border-box;
            background: #fff;
            color: #ff3737;
            font-size: 12px;
            text-align: center;
            vertical-align: text-top;
            line-height: 20px;
            border-radius: 20px;

            img {
                width: 15px;
                height: 15px;
            }
        }

        .num {
            font-size: 32px;
            margin-top: 10px;
        }

        .bottombox {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 24px;
            // background: rgba(255, 255, 255, 0.2);

            .line {
                width: 1px;
                height: 30px;
                background: #000;
            }
        }
    }
    .card1 {
        color: #000000;
        background: linear-gradient( 45deg, #C4F2FF 0%, #3079FF 100%);
        .line {
                background: #000!important;
            }
    }
}
</style>
